<!-- 控件的使用 -->
<template>
  <div>
    <div style="" ref="map" id="mapDiv"></div>

    <button @click="leftTOP">添加缩放控件：左上角</button>
    <button @click="rightTOP">添加缩放控件：右上角</button>
    <button @click="leftBOTTOM">添加缩放控件：左下角</button>
    <button @click="rightBOTTOM">添加缩放控件：右下角</button>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
const map = ref(null);

const control = ref(null);
const scale = ref(null);
const copyControl = ref(null);
const military = ref(null);
const type = ref(null);

onMounted(() => {
  // 创建地图
  map.value = new T.Map("mapDiv");
  map.value.centerAndZoom(new T.LngLat(116.40969, 39.89945), 12);

  /**
   * 创建缩放平移控件对象
   */
  control.value = new T.Control.Zoom(); // 创建缩放平移控件对象
  map.value.addControl(control.value); // 添加缩放平移控件

  /**
   * 创建比例尺控件
   */
  scale.value = new T.Control.Scale({
    position: T_ANCHOR_BOTTOM_LEFT, // 控件显示位置
  }); // 创建比例尺控件
  map.value.addControl(scale.value); // 添加比例尺控件

  /**
   * 创建鹰眼控件
   */
  const miniMap = ref(
    // 创建鹰眼控件
    new T.Control.OverviewMap({
      isOpen: true,
      size: new T.Point(100, 100),
    })
  );
  map.value.addControl(miniMap.value); // 添加鹰眼控件

  /**
   * 创建地图版权控件
   */
  copyControl.value = new T.Control.Copyright({ position: T_ANCHOR_TOP_LEFT }); // 显示位置
  map.value.addControl(copyControl.value); // 添加地图版权控件
  copyControl.value.addCopyright({
    id: 1,
    content:
      "<a href='https://www.tianditu.gov.cn' target='_blank' style='font-size:14px;background:yellow'>自定义的版权控件</a>",
    bounds: map.value.getBounds(), //返回地图可视区域
  });

  /**
   *  符号标绘控件
   */
  military.value = new T.Control.militarySymbols(); // 创建控件
  map.value.addControl(military.value); // 添加控件

  /**
   * 地图类型控件
   */
  type.value = new T.Control.MapType(); // 创建控件
  map.value.addControl(type.value); // 添加控件
});

/**
 * 添加缩放控件
 */
const leftTOP = () => control.value.setPosition(T_ANCHOR_TOP_LEFT); // 左上角
const rightTOP = () => control.value.setPosition(T_ANCHOR_TOP_RIGHT); // 右上角
const leftBOTTOM = () => control.value.setPosition(T_ANCHOR_BOTTOM_LEFT); // 左下角
const rightBOTTOM = () => control.value.setPosition(T_ANCHOR_BOTTOM_RIGHT); // 右下角
</script>
<style>
#mapDiv {
  width: 800px;
  height: 500px;
  margin: 0 auto;
}
</style>
